let seconds = 30
let score = 0;
// 碗左右移动
$('html').keydown(function(e) {
  if (e.key === 'ArrowLeft') {
    if ($('.pen').is(':animated')) return
    if ($('.pen').offset().left <= 0) return
    $('.pen').animate({
      "left":"-=20px"
    }, 2)
  }
  else if(e.key === 'ArrowRight') {
    if ($('.pen').is(':animated')) return
    if ($('.pen').offset().left >= $(window).width()-$('.pen').width()-15) return
    // console.log($('.pen'))
    $('.pen').animate({
      "left":"+=20px"
    }, 2)
  }
  // console.log($('body').width())
})
const produceGoldTimer = setInterval(produceGold, 1000)
// 产生金币
function produceGold() {
  const gold = $(`
      <div class="gold">
        <img src="./img/jin.png">
      </div>
    `)
  const max = $('body').width() - $('.pen').width() - 20
  const random = Math.floor(Math.random() * max + 1) // 产生[0, $max]间的整数
  $('body').append(gold)
  // console.log(gold)
  gold.css({
    "position": "absolute",
    "left": `${random}px`,
    "top": 0
  })
  goldDown(gold)
}
// 金币下落及判断是否接住逻辑
function goldDown(goldObj) {
  let goldLeft
  let goldTop
  let penLeft
  let penTop
  goldObj.timer = setInterval(function () {
    goldObj.animate({
      "top": "+=10px"
    }, 100)
    goldLeft = goldObj.offset().left
    goldTop = goldObj.offset().top
    penLeft = $('.pen').offset().left
    penTop = $('.pen').offset().top
    // 如果金币距离碗左右偏移10px单位量并且金币上定位大于等于碗的上定位时=>接住了，加分并删除节点 
    if (goldLeft >= penLeft - 10 && goldLeft <= penLeft + $('.pen').width() + 10 && goldTop >= penTop - goldObj.width()) {
      clearInterval(goldObj.timer)
      goldObj.remove()
      addScore()
      return
    }
    // console.log(goldObj.offset().top)
    // 没接住的情况————清除该金币节点
    if (goldObj.offset().top >= $('.pen').offset().top) {
      clearInterval(goldObj.timer)
      goldObj.remove()
      const div = document.createElement('div')
      div.innerHTML = '<h4>Miss</h4>'
      div.classList.add('fail')
      document.querySelector('body').appendChild(div)
      div.style.left = `${goldLeft}px`
      div.style.top = `${goldTop}px`
      
      setTimeout(function() {
        div.firstChild.classList.add('active')
      }, 100)
      setTimeout(function() {
        div.remove()
      }, 1500)
        return
      }
  }, 100)
}

// 接住后加分逻辑
const scoreNode = document.querySelector('.score h3 span')
function addScore() {
  score++
  scoreNode.innerHTML = score
  scoreNode.classList.add('active')
  setTimeout(function() {
    scoreNode.classList.remove('active')
  }, 400)
}

// 计时逻辑
const playTime = document.querySelector('.score p span')
const playTimes = setInterval(function() {
  seconds--
  // 补零操作
  let tempSeconds = seconds < 10 ? '0' + seconds : seconds
  playTime.innerHTML = tempSeconds
  if (!seconds) {
    document.querySelector('.score p').innerHTML = '<span>已结束</span>'
    clearTimeout(produceGoldTimer)
    // alert('结束')
    clearTimeout(playTimes)
    return
  }
}, 1000)

// 测试代码
// document.querySelector('button').addEventListener('click', () => {
//   addScore()
//   document.querySelector('.score h3 span').classList.add('active')
//   setTimeout(function() {
//     document.querySelector('.score h3 span').classList.remove('active')
//   }, 400)
// })